<!-- 戴博学  字典管理 -->
<template>
  <div>
    <el-card style="margin-bottom: 10px">
        <el-input
          v-model="input"
          style="width: 200px"
          placeholder="请输入字典名称"
          suffix-icon="el-icon-message"
        ></el-input>
        <el-button
          class="custom-button ml-10"
          icon="el-icon-search"
          @click="selectLike()"
          >搜索</el-button
        >
        <el-button
          style="margin-left: 30px"
          class="custom-buttonT"
          icon="el-icon-plus"
          @click="dialogFormInsertVisible=true"
          >新增</el-button
        >
      </el-card>
      <el-card>
    <el-table :data="tableData.slice((this.page.pageNum-1)*this.page.pageSize,this.page.pageNum*this.page.pageSize)"   height="600" borderstyle="width: 50%">
        <el-table-column prop="dataId" label="字典编号" width="180">

        </el-table-column>
        <el-table-column prop="dictType" label="字典类型" width="180">

        </el-table-column>
        <el-table-column prop="dictLabel" label="字典标签" width="180">
        
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180">
        
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
              <el-tag effect="plain" v-if="scope.row.status == 1"
                >停用</el-tag
              >
              <el-tag
                effect="plain"
                class="pass_button"
                type="success"
                v-if="scope.row.status == 0"
                >正常</el-tag
              >
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        
        </el-table-column>
        <el-table-column  label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              class="pass_button"
              @click="updateClick(scope.row)"
              type="small"
              icon="el-icon-edit"
              >修改
            </el-button>
            <el-button
              class="pass_button"
              @click="deleteByDataId(scope.row.dataId)"
              type="small"
              icon="el-icon-edit"
              >删除
            </el-button>
          </template>
      </el-table-column>
    </el-table>
</el-card>
    <div class="el-dialog-div">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNum"
                       :page-sizes="[2, 4, 6, 8]" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total"
                       style="float:right;margin-right: 40%;margin-top: 50px;margin-bottom:30px;"
                       v-if="page.total>1"> 
              </el-pagination>
    </div>

    <el-dialog title="增加字典类型信息" :visible.sync="dialogFormInsertVisible" @close="handleClose('newDictForm')">
        <el-form status-icon  ref="newDictForm" :model="newDictForm" label-width="100px" >
            <el-form-item label="字典类型:">
                <el-col :span="8">
                    <el-input  v-model="newDictForm.dictType" ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="字典标签:">
                <el-col :span="8">
                    <el-input  v-model="newDictForm.dictLabel" ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="状态:">
                <el-radio v-model="newDictForm.status" label="0">正常</el-radio>
                <el-radio v-model="newDictForm.status" label="1">停用</el-radio>
            </el-form-item>
            <el-form-item label="备注:">
                <el-col :span="8">
                    <el-input v-model="newDictForm.remark"  ></el-input>
                </el-col>
            </el-form-item>          
        </el-form> 
        <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormInsertVisible = false">取 消 </el-button>  
              <el-button @click="insertDictData()">确定添加 </el-button>           
        </div>   
        </el-dialog>

        <el-dialog title="修改字典类型信息" :visible.sync="dialogFormUpdateVisible" @close="handleClose('dictForm')">
        <el-form status-icon  ref="dictForm" :model="dictForm" label-width="100px" >
            <el-form-item label="字典类型:">
                <el-col :span="8">
                    <el-input  v-model="dictForm.dictType" ></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="字典标签:">
                <el-col :span="8">
                    <el-input  v-model="dictForm.dictLabel" ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="状态:">
                <el-radio v-model="dictForm.status" label="0">正常</el-radio>
                <el-radio v-model="dictForm.status" label="1">停用</el-radio>
            </el-form-item>
            <el-form-item label="备注:">
                <el-col :span="8">
                    <el-input v-model="dictForm.remark"  ></el-input>
                </el-col>
            </el-form-item>          
        </el-form> 
        <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormUpdateVisible = false">取 消 </el-button>  
              <el-button @click="updateDictData()">确定修改 </el-button>           
        </div>   
        </el-dialog>
  
  </div>
</template>

<script>
export default {
  created() {
    const dictId = this.$route.params && this.$route.params.dictId;
    this.newDictForm.dictId = dictId;
    this.dictForm.dictId = dictId;
  },
  data() {
    return {
      input:"",
      dialogFormUpdateVisible: false,
      dialogFormInsertVisible: false,
      tableData: [],
      //分页参数
      page: {
        // 数据总条数
        total: 0,
        // 当前页
        pageNum: 1,
        // 每页条数
        pageSize: 4,
      },
      newDictForm: {
        dataId: "",
        dictId: "",
        dictLabel: "",
        dictType: "",
        status: "",
        remark: "",
        createTime: "",
      },
      dictForm: {
        dataId: "",
        dictId: "",
        dictLabel: "",
        dictType: "",
        status: "",
        remark: "",
        createTime: "",
      },
    };
  }, 
    methods:{
        selectDataByPage(row){
            this.$axios.get('/dictData/selectDataByPage?dictId='+this.dictForm.dictId).then((res) => {
                this.page.total=res.data.data.totalSize
                this.tableData=res.data.data.content
          })
        },
        //分页控制方法
        handleSizeChange (val) {
                  this.page.pageSize = val
                  this.selectDataByPage()
        },
        //分页控制方法
        handleCurrentChange (val) {
                  this.page.pageNum = val
                  this.selectDataByPage()
        },
        // 重置数据，同时也取消了表单的校验 refundFormData：el-form用ref绑定的值，
        handleClose(formName) {
                this.$refs[formName].resetFields()
        },
        insertDictData(){
            var formData = new FormData();
            formData.set("dictId",this.newDictForm.dictId)
            formData.set("dictLabel",this.newDictForm.dictLabel)
            formData.set("dictType",this.newDictForm.dictType)
            formData.set("status",this.newDictForm.status)
            formData.set("remark",this.newDictForm.remark)
            this.$refs.newDictForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/dictData/insertDictData',formData).
                        then(res => {
                            if(res.data.code == 200){
                                this.$message.success("恭喜你，添加成功！")
                                this.dialogFormInsertVisible = false
                                this.selectDataByPage()                  
                            }else{ 32
                                this.$message.warning("对不起，添加失败！")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false; 
                    }
                });
        },
        updateDictData(){
            var formData = new FormData();
            formData.set("dataId",this.dictForm.dataId)
            formData.set("dictId",this.dictForm.dictId)
            formData.set("dictLabel",this.dictForm.dictLabel)
            formData.set("dictType",this.dictForm.dictType)
            formData.set("status",this.dictForm.status)
            formData.set("remark",this.dictForm.remark)
            this.$refs.dictForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/dictData/updateDictData',formData).
                        then(res => {
                            if(res.data.code == 200){
                                this.$message.success("恭喜你，添加成功！")
                                this.dialogFormUpdateVisible = false
                                this.selectDataByPage()                  
                            }else{ 32
                                this.$message.warning("对不起，添加失败！")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false; 
                    }
                });
        },
        updateClick(row){
          this.dictForm.dataId=row.dataId
          this.dictForm.dictId=row.dictId
          this.dictForm.dictLabel=row.dictLabel
          this.dictForm.dictType=row.dictType
          this.dictForm.status=row.status
          this.dictForm.remark=row.remark
          this.dialogFormUpdateVisible=true
        },
        deleteByDataId(row){
            this.$confirm('是否永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
        this.$axios.delete('/dictData/deleteByDataId?dataId='+row)
            .then((res) => {
              this.$message({
                type: 'success', 
                message: '删除成功!'
              });
              this.selectDataByPage()    
            })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    selectLike(){
            this.$axios.get('/dictData/selectLike?dictLabel='+this.input).then((res) => {
                this.tableData = res.data.data
          })
        },
    },
    mounted(){
        this.selectDataByPage()
       
    }
}
</script>

<style>

</style>
